import React, { Component } from "react";
import { NavBar, List, Mask, Toast } from "antd-mobile";
// import { Button, Dialog, Space, Toast, Divider } from 'antd-mobile'
import * as service from "../api/index";
import "../styles/Shezhi.scss";
class Shezhi extends Component {
  constructor(props) {
    super(props);
    this.state = {
      oldpass: "",
      pass: "",
      isagree: false,
      visible: false,
      setVisible: false,
      visible1: false,
      setVisible1: false,
      name: "",
    };
  }

  fanhui() {
    this.props.history.go(-1);
  }

  handleChange(e) {
    this.setState(
      {
        [e.target.name]:
          e.target.type == "checkbox" ? e.target.checked : e.target.value,
      },
      () => {
        // console.log(this.state);
      }
    );
  }
  login() {
    console.log(this.state);
  }
  //打开更改密码弹框
  guanbi() {
    this.setState({ visible: false });
  }
  dakai() {
    this.setState({ visible: true });
  }
  //打开更改用户名弹框
  guanbi1() {
    this.setState({ visible1: false });
  }
  dakai1() {
    this.setState({ visible1: true });
  }
  //发请求，改密码
  async pass() {
    var res = await service.user_updatePassword({
      userid: localStorage.getItem("userid"),
      oldpassword: this.state.oldpass,
      newpassword: this.state.pass,
    });
    console.log(res);
    if (res.data.code == 200) {
      Toast.show({
        content: "修改密码成功",
        afterClose: () => {
          console.log("after");
        },
      });
    }
    console.log(this.state.oldpass);
    console.log(this.state.pass);
  }
  //发请求，改用户名
  async Name() {
    var res = await service.user_bindusername({
      userid: localStorage.getItem("userid"),
      username: this.state.name,
    });
    if (res.data.code == 200) {
      Toast.show({
        content: "用户名更改成功",
        afterClose: () => {
          console.log("after");
        },
      });
    }
  }

  //退出登录
  tuichu() {
    this.props.history.push("/login");
    console.log("77");
  }
  render() {
    return (
      <div className="Shezhi">
        <>
          <Mask
            visible={this.state.visible}
            onMaskClick={() => {
              this.guanbi();
            }}
          >
            <div className="nav">
              <h1>修改密码</h1>
              <div className="box">
                <input
                  type="text"
                  name="oldpass"
                  placeholder="输入原始密码"
                  value={this.state.phone}
                  onChange={(e) => {
                    this.handleChange(e);
                  }}
                />
              </div>
              <div className="box">
                <input
                  type="password"
                  name="pass"
                  placeholder="输入新密码"
                  value={this.state.pass}
                  onChange={(e) => {
                    this.handleChange(e);
                  }}
                />
              </div>
              <div className="button">
                <div
                  className="button1"
                  onClick={() => {
                    this.pass();
                  }}
                >
                  更改
                </div>
              </div>
            </div>
          </Mask>
        </>
        <>
          <Mask
            visible={this.state.visible1}
            onMaskClick={() => {
              this.guanbi1();
            }}
          >
            <div className="nav">
              <h1>修改用户名</h1>
              <div className="box">
                <input
                  type="text"
                  name="name"
                  placeholder="请输入用户名"
                  value={this.state.name}
                  onChange={(e) => {
                    this.handleChange(e);
                  }}
                />
              </div>

              <div className="button">
                <div
                  className="button1"
                  onClick={() => {
                    this.Name();
                  }}
                >
                  更改
                </div>
              </div>
            </div>
          </Mask>
        </>
        <div className="header">
          {" "}
          <NavBar
            onBack={() => {
              this.fanhui();
            }}
          >
            设置
          </NavBar>
        </div>
        <div className="list">
          <List>
            <List.Item
              block
              onClick={() => {
                this.dakai();
              }}
            >
              修改密码
            </List.Item>
            <List.Item
              onClick={() => {
                this.dakai1();
              }}
            >
              修改用户名
            </List.Item>
          </List>
        </div>
        <div
          className=" tuichu"
          onClick={() => {
            this.tuichu();
          }}
        >
          退出登录
        </div>
      </div>
    );
  }
}

export default Shezhi;
